<template>
  <el-dialog v-model="visable" v-if="visable" draggable title="新增岗位">
    <ElForm label-suffix=":" label-width="100px">
      <ElFormItem label="岗位名称">
        <ElInput></ElInput>
      </ElFormItem>
      <ElFormItem label="岗位编号">
        <ElInput></ElInput>
      </ElFormItem>
      <ElFormItem label="岗位顺序">
        <ElInputNumber/>
      </ElFormItem>
      <ElFormItem label="状态">
        <ElRadioGroup>
          <ElRadio>正常</ElRadio>
          <ElRadio>禁用</ElRadio>
        </ElRadioGroup>
      </ElFormItem>
      <ElFormItem label="备注">
        <ElInput type="textarea"></ElInput>
      </ElFormItem>
    </ElForm>

    <template #footer>
      <ElButton type="primary" :icon="Check">保存</ElButton>
      <ElButton @click="visable = false" :icon="Close">取消</ElButton>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">

import {ref} from "vue";

import { Check, Close } from '@element-plus/icons-vue';
import {
  ElButton,
  ElDialog,
  ElForm,
  ElFormItem,
  ElInput,
  ElInputNumber,
  ElRadio,
  ElRadioGroup,
} from 'element-plus';

const visable = ref(false);
const init = () => {
  visable.value = true;
};

const initEdit = (id: string) => {
  visable.value = true;
};


defineExpose({
  init,
  initEdit
});
</script>

<style scoped></style>
